<template>
    <div class="container">
        <div>
            <van-nav-bar title="陪诊认证" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="content">
            <van-cell-group inset>
                <van-cell title="性名" />
                <van-field v-model="name" />
                <van-cell title="性别" />
                <van-field v-model="sex" name="picker" @click="showPicker = true" />
                <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
                    <van-picker :columns="columns" :model-value="pickerValue" @confirm="onConfirm"
                        @cancel="showPicker = false" />
                </van-popup>
                <van-cell title="服务地区" />
                <van-field v-model="address" />
                <van-cell title="身份证号码" />
                <van-field v-model="IDcard" />
            </van-cell-group>
        </div>
        <div class="services">
            <van-cell-group inset>
                <van-cell title="服务项目" />
                <van-field name="checkboxGroup">
                    <template #input>
                        <van-checkbox-group v-model="checked" direction="horizontal" class="checkboxGroup"
                            @change="checkedserviceitems">
                            <van-checkbox name="1" shape="square" class="item">全程陪诊</van-checkbox>
                            <van-checkbox name="2" shape="square" class="item">代办买药</van-checkbox>
                            <van-checkbox name="3" shape="square" class="item">专享陪诊</van-checkbox>
                            <van-checkbox name="4" shape="square" class="item">尊享VIP陪诊</van-checkbox>
                            <van-checkbox name="5" shape="square" class="item">专业陪护</van-checkbox>
                            <van-checkbox name="6" shape="square" class="item">12小时陪护</van-checkbox>
                        </van-checkbox-group>
                    </template>
                </van-field>
            </van-cell-group>
        </div>
        <div class="submit">
            <van-button round block type="primary" @click="onSubmit">
                提交
            </van-button>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import http from '@/http';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/counter.js';
let userStore = useUserStore();
let router = useRouter();
let name = ref('');
let address = ref('');
let IDcard = ref('');
let sex = ref('');
let pickerValue = ref([]);
let showPicker = ref(false);
let checked = ref([]);

let columns = [
    { text: '男', value: '男' },
    { text: '女', value: '女' },

];

const onConfirm = ({ selectedValues, selectedOptions }) => {
    sex.value = selectedOptions[0]?.text;
    pickerValue.value = selectedValues;
    showPicker.value = false;
};
const checkedserviceitems = (value) => {
    checked.value = value;
    console.log("选中的checkbox发生了变化", value, checked.value);
};

function onSubmit() {
    const params = {
        e_name: name.value,
        e_phone: userStore.phone,
        address: address.value,
        e_card: IDcard.value,
        e_sex: sex.value,
        checked: checked.value,
    };
    http.post('/escort/certification/', params).then(res => {
        console.log("提交成功", res);
        router.push('/mypage');
    }).catch(err => {
        console.log("提交失败", err);
    })
}
const onClickLeft = () => history.back();
</script>
<style scoped>
.container {
    height: 100%;
    width: 100%;
}

.content,
.services {
    height: 100%;
    background-color: rgb(247, 247, 247);
}

.submit {
    height: 100%;
    background-color: rgb(247, 247, 247);
    margin: 20px 10%;
    width: 80%;
}

.checkboxGroup {
    width: 80%;
}

.item {
    margin: 10px 10px;
}
</style>